<template>
	<view class="container">		
		<view class="pos-top border-t1 border-b1 bg-white p-t30 p-b30 fs12">
			<view class="map_search uni-flex justify-space-between border">
				<uni-easyinput prefixIcon="search" v-model="keyword" placeholder="输入案例名称" :clearable="false"></uni-easyinput>
				<view class="map_search_btn text-blue" @click="searchChange('keyword', keyword)">搜索</view>
			</view>
			<view class="p-b20 uni-flex justify-left">
				<view class="pos_tab_title fw600">风格</view>
				<view class="pos_tab_cont">
					<zb-tab v-model="form.style_code" :data="styleList" :shrink="true" height="20" :activeStyle="activeStyle" lineColor="transparent" @input="styleResult"></zb-tab>
				</view>
			</view>	
			<view class="p-b20 uni-flex justify-left">
				<view class="pos_tab_title fw600">户型</view>
				<view class="pos_tab_cont">
					<zb-tab v-model="form.type_code" :data="typeList" :shrink="true" height="20" :activeStyle="activeStyle" lineColor="transparent" @input="typeResult"></zb-tab>
				</view>
			</view>	
			<view class="p-b20 uni-flex justify-left">
				<view class="pos_tab_title fw600">面积</view>
				<view class="pos_tab_cont">
					<zb-tab v-model="form.area" :data="areaList" :shrink="true" height="20" :activeStyle="activeStyle" lineColor="transparent" @input="areaResult"></zb-tab>
				</view>
			</view>
			
		</view>
		
		<!-- 案例 -->
		<view class="case_list p-30">
			<view class="case_item bg-white m-b20 round-10" v-for="item in list" @click="goPage(item.id)">
				<view class="case_image round-10 overflow_h bg-grayf5">
					<image class="case_img round-10 " :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="case_title fs12 text-gray6"> {{ item.title }} </view>
				<view class="case_style fs10 text-gray9 uni-flex justify-space-between"> 
					<view>{{ item.style.title || "" }} · {{ item.area || 0 }}㎡</view>
					<view>{{ item.city.title || "" }}</view>
				</view>
				<view class="case_labels uni-flex justify-left">
					<view class="case_label m-r10 fs10" v-for="(ll,kk) in item.labels" v-if="kk < 3">{{ ll.title }}</view>
				</view>
			</view>
		</view>
		
		<common-footer></common-footer>
		
	</view>
</template>

<script>
import { styleList, typeList, caseList } from "@/api/house.js"

let that;
export default {
	data() {
		return {
      keyword: "",
			list: [],		//案例列表
			pages: {
				page: 1,
				size: 10,
				loading: true
			},
			styleList: [{ "name": "全部", "value": "" },],	//风格
			typeList: [{ "name": "全部", "value": "" },],	//户型
			areaList:[		//面积
				{ "name": "全部", "value": 0 },
				{ "name": "70㎡以下", "value": 1 },
				{ "name": "70㎡-90㎡", "value": 2 },
				{ "name": "90㎡-120㎡", "value": 3 },
				{ "name": "120㎡-150㎡", "value": 4 },
				{ "name": "150㎡-200㎡", "value": 5 },
				{ "name": "200㎡以上", "value": 6 }
			],
			areaValue: ["",[0,70],[70, 90],[90, 120],[120, 150],[150, 200],[200, 0]],
			
			form: {
				style_code: '',
				type_code: '',
				area: 0,
			},
			activeStyle: {				
				'color': 'rgba(0, 122, 255, .8)',
				'background-color': 'rgba(0, 122, 255, .1)',
				'font-weight': 'normal'
			}
		}
	},
	onLoad(e){
		that = this
		that.getStyleList()
		that.getTypeList()
		that.getCaseList()
	},
	onReachBottom(e){
		that.pages.page++
		that.getCaseList()
	},
	methods: {
    searchChange(type, value) {
    	that.pages.page = 1
    	that.pages.loading = true
    	that.getCaseList()
    },
		areaResult(e) {
			that.form.area = e
			that.pages.page = 1
			that.pages.loading = true
			that.getCaseList()
		},
		typeResult(e) {
			that.form.type_code = e		
			that.pages.page = 1
			that.pages.loading = true
			that.getCaseList()	
		},
		styleResult(e) {
			that.form.style_code = e	
			that.pages.page = 1
			that.pages.loading = true
			that.getCaseList()
		},
		/**
		 * 户型
		 */
		getTypeList() {
			typeList({
				order: "sort asc",
				condition: {
					state: 1
				}				
			}).then(res => {
				res.data.forEach(item => {
					that.typeList.push({
						name: item.title,
						value: item.code
					})
				})
			})
		},
		/**
		 * 户型
		 */
		getStyleList() {
			styleList({
				order: "sort asc",
				condition: {
					state: 1
				}				
			}).then(res => {
				res.data.forEach(item => {
					that.styleList.push({
						name: item.title,
						value: item.code
					})
				})
			})
		},
		/**
		 * 案例
		 */
		getCaseList(){		
			if(!that.pages.loading) return
			that.pages.loading = false
			let params = {
				page: that.pages.page,
				size: that.pages.size,
				order: "sort asc",
				condition: {
					state: 1,
					type_code: that.form.type_code,
					style_code: that.form.style_code,
					area: that.areaValue[that.form.area],
				},
        keyword: that.keyword
			};
			caseList(params).then((res)=>{
				that.pages.loading = true
				let data = res.data
				let list = [];
				if(that.pages.page == 1) list = data.list;
				else list = [...that.list, ...data.list];
				that.list = list; 
			})
		},
		/**
		 * 案例详情
		 */
		goPage(id) {			
			uni.navigateTo({
				url: `/pages/case/detail?id=${id}`
			})
		}
	}
}
</script>

<style>
.case_title {
	height: 36px;
	line-height: 18px;
	white-space: pre-line; /*允许换行*/
	overflow: hidden;
	text-overflow: ellipsis; /*省略号*/
	display: -webkit-box;
	-webkit-box-orient: vertical; /*行向垂直排列*/
	-webkit-line-clamp: 2; /*限制2行*/
}
.map_search {
	/* width: 90%; */
	margin: 0 20rpx 30rpx;
	border-radius: 8rpx;
	height: 70rpx;
	line-height: 70rpx;
	background-color: #eaeaea;
	border-radius: 40rpx;
	overflow: hidden;
}
.map_search_btn {
	width: 18vw;
	right: 0;
	top: 0;
	line-height: 35px;
	text-align: center;
}
.uni-easyinput__content {
	border: none !important;
	width: 82vw;
	height: 35px;
	background-color: #eaeaea !important;
}
.pos_tab_title {    
	width: 13vw;
    text-align: center;
}
.pos_tab_cont {
	width: 87vw;
}
.pos_tab_cont .zb-tab {
	padding: 0 !important;	
}
.pos_tab_cont .zb-tab__text {
	font-size: 12px !important;
	padding: 0 10px;
	border-radius: 20px;
}
.case_list {
	margin-top: 122px;
}
.case_item {
	padding: 8rpx 8rpx 15rpx;
}
</style>